<template>
  <div class="grid-content bg-purple" :style="{ height: containerHeight }">
    <el-tree
      :data="data"
      :props="defaultProps"
      default-expand-all
      :expand-on-click-node="false"
      @node-click="handleNodeClick"
    />
  </div>
</template>

<script>
import { getTree } from '@/api/dashboard'
import { tranListToTreeData } from '@/utils'

export default {
  props: {
    containerHeight: {
      type: String,
      default: '300px' // 默认高度为 200px
    }
  },
  data() {
    return {
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created() {
    this.getTrees()
  },
  methods: {
    async getTrees() {
      const res = await getTree()
      console.log(res)
      this.data = tranListToTreeData(JSON.parse(res.data))
    },
    handleNodeClick(data) {
      // console.log('点击树', data)
      this.$emit('dianjiTree', data)
    }
  }
}
</script>

<style lang="scss" scoped>
.grid-content {
  height: 100%;
  position: relative;
  cursor: default;
  background: #fff;
  color: #606266;
  padding-left: 10px;
  .el-tree {
    // margin-right: 20px;
    padding: 40px 20px 20px 10px;
    height: 100%;
  }
}
</style>
